<template>
    <FormItem :label="`${itemData.label}：`" :prop="itemData.name" :label-for="itemData.name" :rules='itemData.rules'>
        <!-- <TreeSelect v-model='formData[itemData.name]'
                    :multiple='itemData.multiple'
                    @on-change='handleChange'
                    show-checkbox
                    :data='dataList' />-->

        <Input readonly="readonly" @on-change="handleInputChange" v-model="selectValue" style="width: 65%"></Input>

        <Button style="width: 35%;" @click="chooseCategory()" class="btn">选择分类</Button>
        <Input readonly="readonly" type="hidden" v-model="formData.categoryUuid" style="width: 300px"></Input>

        <Modal :loading="loading" v-model="modal1" title="商品分类(请选择四级分类进行搜索，可选择多个四级分类)" width="70%" @on-ok="selectOk"
            height="50%">

            <!--   <Tree :data="data4"
                  ref="tree"
                  @on-select-change="checkChange"
                  check-strictly
                  node-key="id"
                  :multiple="multiple"

            ></Tree>-->

            <Tree @on-check-change="checkChange" ref="tree" :data="data3" :load-data="loadData" show-checkbox></Tree>

        </Modal>

    </FormItem>
</template>
<script>
    import { ApiRequest } from '@api/basePage';

    export default {
        props: {
            itemData: {
                type: Object
            },
            formData: {
                type: Object
            }
        },
        data() {
            return {
                dataList: [],
                data3: [
                ],
                selectValue: '',
                modal1: false,
                selectData: [],
                selectUuidData: [],
                categoryUuid: '',
                categoryType: '01',
                loading: true
            }
        },
        created() {
            // 获取一级分类
            this.categoryType = this.itemData.categoryType;
            let productType = this.formData.productType;
            if (productType === '03') {
                this.categoryType = '03'
            } else if (productType === '04') {
                this.categoryType = '04'
            }

            this.init();
        },

        methods: {

            // 改变选中值
            handleChange(value) {
                this.$emit('handleChangeFormData', this.formData);
            },
            chooseCategory: function () {
                // this.init();
                this.modal1 = true;
            },
            selectOk: function () {
                let data = [];
                let data2 = [];
                this.selectData.forEach(item => {
                    data.push(item.title)
                    data2.push(item.uuid);
                })
                this.selectValue = data.join(',');
                if (data2.length > 0) {
                    this.formData.categoryUuid = data2.join(',');
                } else {
                    this.formData.categoryUuid = '';
                    localStorage.setItem('categoryUuid', '')
                }
            },
            checkChange: function () {
                let sdata = this.$refs.tree.getCheckedNodes();
                let data = []
                sdata.forEach(item => {
                    if (item.children.length === 0) {
                        data.push(item)
                    }
                })
                this.selectData = data;
            },
            loadData(item, callback) {
                /*   setTimeout(() => {
                    const data = [
                        {
                            title: 'children',
                            loading: false,
                            children: []
                        },
                        {
                            title: 'children',
                            loading: false,
                            children: []
                        }
                    ];
                    callback(data);
                }, 1000); */

                ApiRequest('/sysback/category/productplatformcategory/getPlatCategorySubByParentUuid', 'post', { 'parentUuid': item.uuid, 'categoryType': this.categoryType }, true).then(res => {
                    //  if (res.retStatus == 1) {

                    if (res.retData) {
                        let data = res.retData;

                        let dataRel = [];

                        data.forEach(item => {
                            if (item.levelNum === '4') {
                                dataRel.push(
                                    {
                                        title: item.categoryName,
                                        children: [],
                                        loading: false,
                                        disableCheckbox: false,
                                        disabled: false,
                                        uuid: item.uuid
                                    }

                                )
                            } else {
                                dataRel.push(
                                    {
                                        title: item.categoryName,
                                        children: [],
                                        loading: false,
                                        disableCheckbox: true,
                                        disabled: true,
                                        uuid: item.uuid
                                    }

                                )
                            }
                        })

                        callback(dataRel);
                    } else {
                        callback();
                    }
                })
            },
            init: function () {
                ApiRequest('/sysback/category/productplatformcategory/getPlatCategorySubByParentUuid', 'post', { 'parentUuid': 'systemUuid', 'categoryType': this.categoryType }, true).then(res => {
                    //  if (res.retStatus == 1) {
                    let data = res.retData;
                    let dataRel = [];

                    data.forEach(item => {
                        dataRel.push(
                            {
                                title: item.categoryName,
                                children: [],
                                loading: false,
                                disableCheckbox: true,
                                disabled: true,
                                uuid: item.uuid
                            }

                        )
                    })

                    this.data3 = dataRel;

                    this.loading = false;
                    //  }
                })
            },
            handleInputChange(event) {
                this.$emit('handleChangeFormData', this.formData);
            }

        },
        watch: {
            'formData.categoryUuid'(n, o) {
                if (!n) {
                    this.init();

                    this.selectValue = '';
                }
            },
            'formData.productType'(n, o) {
                this.categoryType = n;

                this.init();
            }
        }
    }
</script>
<style>
    .btn {
        text-align: center;
        font-size: 12px;
    }
</style>